<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Button-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>MessageBoard留言板</h1>
        <section class="markdown">
            <p></p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<div class="box box-widget">
  <div class="box-header with-border">
    <div class="user-block">
      <img class="img-circle" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="User Image">
      <span class="username"><a href="#">Jonathan Burke Jr.</a></span>
      <span class="description">Shared publicly - 7:30 PM Today</span>
    </div>
    <!-- /.user-block -->
    <div class="box-tools">
      <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="" data-original-title="Mark as read">
        <i class="fa fa-circle-o"></i></button>
      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
      </button>
      <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
    </div>
    <!-- /.box-tools -->
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    <!-- post text -->
    <p>Far far away, behind the word mountains, far from the
      countries Vokalia and Consonantia, there live the blind
      texts. Separated they live in Bookmarksgrove right at</p>

    <p>the coast of the Semantics, a large language ocean.
      A small river named Duden flows by their place and supplies
      it with the necessary regelialia. It is a paradisematic
      country, in which roasted parts of sentences fly into
      your mouth.</p>

    <!-- Attachment -->
    <div class="attachment-block clearfix">
      <img class="attachment-img" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="Attachment Image">

      <div class="attachment-pushed">
        <h4 class="attachment-heading"><a href="http://www.lipsum.com/">Lorem ipsum text generator</a></h4>

        <div class="attachment-text">
          Description about the attachment can be placed here.
          Lorem Ipsum is simply dummy text of the printing and typesetting industry... <a href="#">more</a>
        </div>
        <!-- /.attachment-text -->
      </div>
      <!-- /.attachment-pushed -->
    </div>
    <!-- /.attachment-block -->

    <!-- Social sharing buttons -->
    <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
    <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
    <span class="pull-right text-muted">45 likes - 2 comments</span>
  </div>
  <!-- /.box-body -->
  <div class="box-footer box-comments">
    <div class="box-comment">
      <!-- User image -->
      <img class="img-circle img-sm" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="User Image">

      <div class="comment-text">
            <span class="username">
              Maria Gonzales
              <span class="text-muted pull-right">8:03 PM Today</span>
            </span><!-- /.username -->
        It is a long established fact that a reader will be distracted
        by the readable content of a page when looking at its layout.
      </div>
      <!-- /.comment-text -->
    </div>
    <!-- /.box-comment -->
    <div class="box-comment">
      <!-- User image -->
      <img class="img-circle img-sm" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="User Image">

      <div class="comment-text">
            <span class="username">
              Nora Havisham
              <span class="text-muted pull-right">8:03 PM Today</span>
            </span><!-- /.username -->
        The point of using Lorem Ipsum is that it has a more-or-less
        normal distribution of letters, as opposed to using
        'Content here, content here', making it look like readable English.
      </div>
      <!-- /.comment-text -->
    </div>
    <!-- /.box-comment -->
  </div>
  <!-- /.box-footer -->
  <div class="box-footer">
    <form action="#" method="post">
      <img class="img-responsive img-circle img-sm" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="Alt Text">
      <!-- .img-push is used to add margin to elements next to floating images -->
      <div class="img-push">
        <input type="text" class="form-control input-sm" placeholder="Press enter to post comment">
      </div>
    </form>
  </div>
  <!-- /.box-footer -->
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认样式</a></div>
                    <div>
                         <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;box box-widget&quot;&gt;
  &lt;div class=&quot;box-header with-border&quot;&gt;
    &lt;div class=&quot;user-block&quot;&gt;
      &lt;img class=&quot;img-circle&quot; src=&quot;dist/assets/img/user1-128x128.jpg&quot; alt=&quot;User Image&quot;&gt;
      &lt;span class=&quot;username&quot;&gt;&lt;a href=&quot;#&quot;&gt;Jonathan Burke Jr.&lt;/a&gt;&lt;/span&gt;
      &lt;span class=&quot;description&quot;&gt;Shared publicly - 7:30 PM Today&lt;/span&gt;
    &lt;/div&gt;
    &lt;!-- /.user-block --&gt;
    &lt;div class=&quot;box-tools&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-box-tool&quot; data-toggle=&quot;tooltip&quot; title=&quot;&quot; data-original-title=&quot;Mark as read&quot;&gt;
        &lt;i class=&quot;fa fa-circle-o&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-box-tool&quot; data-widget=&quot;collapse&quot;&gt;&lt;i class=&quot;fa fa-minus&quot;&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-box-tool&quot; data-widget=&quot;remove&quot;&gt;&lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;!-- /.box-tools --&gt;
  &lt;/div&gt;
  &lt;!-- /.box-header --&gt;
  &lt;div class=&quot;box-body&quot;&gt;
    &lt;!-- post text --&gt;
    &lt;p&gt;Far far away, behind the word mountains, far from the
      countries Vokalia and Consonantia, there live the blind
      texts. Separated they live in Bookmarksgrove right at&lt;/p&gt;

    &lt;p&gt;the coast of the Semantics, a large language ocean.
      A small river named Duden flows by their place and supplies
      it with the necessary regelialia. It is a paradisematic
      country, in which roasted parts of sentences fly into
      your mouth.&lt;/p&gt;

    &lt;!-- Attachment --&gt;
    &lt;div class=&quot;attachment-block clearfix&quot;&gt;
      &lt;img class=&quot;attachment-img&quot; src=&quot;dist/assets/img/photo1.png&quot; alt=&quot;Attachment Image&quot;&gt;

      &lt;div class=&quot;attachment-pushed&quot;&gt;
        &lt;h4 class=&quot;attachment-heading&quot;&gt;&lt;a href=&quot;http://www.lipsum.com/&quot;&gt;Lorem ipsum text generator&lt;/a&gt;&lt;/h4&gt;

        &lt;div class=&quot;attachment-text&quot;&gt;
          Description about the attachment can be placed here.
          Lorem Ipsum is simply dummy text of the printing and typesetting industry... &lt;a href=&quot;#&quot;&gt;more&lt;/a&gt;
        &lt;/div&gt;
        &lt;!-- /.attachment-text --&gt;
      &lt;/div&gt;
      &lt;!-- /.attachment-pushed --&gt;
    &lt;/div&gt;
    &lt;!-- /.attachment-block --&gt;

    &lt;!-- Social sharing buttons --&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-xs&quot;&gt;&lt;i class=&quot;fa fa-share&quot;&gt;&lt;/i&gt; Share&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-xs&quot;&gt;&lt;i class=&quot;fa fa-thumbs-o-up&quot;&gt;&lt;/i&gt; Like&lt;/button&gt;
    &lt;span class=&quot;pull-right text-muted&quot;&gt;45 likes - 2 comments&lt;/span&gt;
  &lt;/div&gt;
  &lt;!-- /.box-body --&gt;
  &lt;div class=&quot;box-footer box-comments&quot;&gt;
    &lt;div class=&quot;box-comment&quot;&gt;
      &lt;!-- User image --&gt;
      &lt;img class=&quot;img-circle img-sm&quot; src=&quot;dist/assets/img/user3-128x128.jpg&quot; alt=&quot;User Image&quot;&gt;

      &lt;div class=&quot;comment-text&quot;&gt;
            &lt;span class=&quot;username&quot;&gt;
              Maria Gonzales
              &lt;span class=&quot;text-muted pull-right&quot;&gt;8:03 PM Today&lt;/span&gt;
            &lt;/span&gt;&lt;!-- /.username --&gt;
        It is a long established fact that a reader will be distracted
        by the readable content of a page when looking at its layout.
      &lt;/div&gt;
      &lt;!-- /.comment-text --&gt;
    &lt;/div&gt;
    &lt;!-- /.box-comment --&gt;
    &lt;div class=&quot;box-comment&quot;&gt;
      &lt;!-- User image --&gt;
      &lt;img class=&quot;img-circle img-sm&quot; src=&quot;dist/assets/img/user5-128x128.jpg&quot; alt=&quot;User Image&quot;&gt;

      &lt;div class=&quot;comment-text&quot;&gt;
            &lt;span class=&quot;username&quot;&gt;
              Nora Havisham
              &lt;span class=&quot;text-muted pull-right&quot;&gt;8:03 PM Today&lt;/span&gt;
            &lt;/span&gt;&lt;!-- /.username --&gt;
        The point of using Lorem Ipsum is that it has a more-or-less
        normal distribution of letters, as opposed to using
        &#x27;Content here, content here&#x27;, making it look like readable English.
      &lt;/div&gt;
      &lt;!-- /.comment-text --&gt;
    &lt;/div&gt;
    &lt;!-- /.box-comment --&gt;
  &lt;/div&gt;
  &lt;!-- /.box-footer --&gt;
  &lt;div class=&quot;box-footer&quot;&gt;
    &lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;
      &lt;img class=&quot;img-responsive img-circle img-sm&quot; src=&quot;dist/assets/img/user4-128x128.jpg&quot; alt=&quot;Alt Text&quot;&gt;
      &lt;!-- .img-push is used to add margin to elements next to floating images --&gt;
      &lt;div class=&quot;img-push&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control input-sm&quot; placeholder=&quot;Press enter to post comment&quot;&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;!-- /.box-footer --&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
    </div>
</article>